<template>
	<u-popup 
		:show="loadingShow || show" 
		overlay 
		:closeOnClickOverlay="false" 
		:safeAreaInsetBottom="false" 
		mode="center" 
		:customStyle="{background: 'transparent'}"
		:overlayStyle="{background: 'rgba(0,0,0,0)'}"
	>
		<view class="loading_box">
			<u-loading-icon></u-loading-icon>
			<text>{{text}}</text>
		</view>
	</u-popup>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name:"loading",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			text: {
				type: String,
				default: '加载中...'
			}
		},
		computed: {
			...mapState('loading_store', ['loadingShow'])
		},
		data() {
			return {
				
			};
		},
		mounted () {
			
		},
	}
</script>

<style lang="scss" scoped>
	.loading_box{
		background-color: #fff;
		width: 160rpx;
		height: 160rpx;
		border-radius: 30rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 20rpx 10rpx rgba(0, 0, 0, 0.1);
		
		text{
			margin-top: 20rpx;
			font-size: 26rpx;
		}
	}

</style>